//获取元素
const tbody=document.querySelector('tbody')
// 获取新增模态框
const addModel = document.querySelector('#addModal');
// 获取新增表单
const addModelform = document.querySelector('.add-form');
//获取更新的模态框
const updateModal = document.querySelector('#updateModal');
//获取更新的表单
const updateModelform = document.querySelector('.update-form');
//获取新增按钮
const addformbtn=document.querySelector('.add-form-btn')

//渲染函数
function render(){
    axios({
        url:'/student/list',
    })
    .then((result)=>{
        // console.log(result)
        const list=result.data.data
        // console.table(list)
    //map如果时{}，则需要return
        const html=list.map((item)=>{
            return`<tr>
            <th scope="row">${item.id}</th>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${item.group}</td>
            <td>${item.phone}</td>
            <td>${item.salary}</td>
            <td>${item.truesalary}</td>
            <td>${item.province}${item.city}${item.county}</td>
            <td>
              <button type="button" class="btn btn-primary btn-sm update" data-id=${item.id}>修改</button>
              <button type="button" class="btn btn-danger btn-sm truedelete"data-id=${item.id}>删除</button>
            </td>
          </tr>
            `
        }).join('')
        tbody.innerHTML=html
    })
    
    
}
render()//渲染调用
//初始化 新增 省市区,value是县区
function renderselect(url,params,keyword,target,value){
    axios({
        url,
        params
    })
    .then((result)=>{
        const list=result.data
    let html = `<option value=''>--${keyword}--</option>`;
    html+=list.map((item,index)=>{
        return`<option value=${item}>${item}</option>`
    }).join('')
    target.innerHTML=html
    target.value=value
    })
        }
//=========================================================================================
function initadd(){//总的
 // 获取新增 表单中  省下拉列表
 const addProviceSelect = addModelform.querySelector("[name='province']");
 // 获取新增 表单中  市下拉列表
 const addCitySelect = addModelform.querySelector("[name='city']");
 // 获取新增 表单中  区下拉列表
 const addCountySelect = addModelform.querySelector("[name='county']");
        //省
    const initProvinceSelect = () =>{
        renderselect('/geo/province',{},'省',addProviceSelect)
    }
    initProvinceSelect()
//====================================================================================
//获取市
//给省绑定change
    const initCitySelect=()=>{
        addProviceSelect.addEventListener('change',function(){
            //切换省的时候，重置县的值（表单中-切换省的bug）
            
            addCountySelect.innerHTML = `<option>-县--</option>`;
            renderselect('/geo/city',{pname:addProviceSelect.value},'市',addCitySelect)
        })
    }
    initCitySelect()//市的调用
//=================================================================================
    const initCountySelect=()=>{
        addCitySelect.addEventListener('change',function(){
            if(!addCitySelect.value){
                addCountySelect.innerHTML = `<option>-县--</option>`;
                return
            }
            renderselect('/geo/county',{pname:addProviceSelect.value,
                cname:addCitySelect.value,},'区',addCountySelect)   
        })
    }
    initCountySelect()//区的调用
}
initadd()//初始化 新增 省市区调用
//==============================================================================
addModelform.addEventListener('submit',function(e){
e.preventDefault()
// console.log('123')
const data = $(addModelform).serialize();
console.log('data: ', data);
axios({
    url:'/student/add',
    method:'post',
    data
})
.then((result)=>{
    console.log(result)
    if(result.data.code===0){
        toastr.success(result.data.message);
        $(addModel).modal('hide');
        // addModelform.reset()
    }else{
        toastr.warning(result.data.message);
    }
})
})
//=================================================================编辑
//事件委托tbody
tbody.addEventListener('click',function(e){
if(e.target.classList.contains('update')){
    $(updateModal).modal('show');
    const id=e.target.dataset.id
    // console.log('id: ', id);
    axios({
        url:'/student/one',
        params:{id},
    })
    .then((result)=>{
        // console.log(result)
        const data=result.data.data
        // console.log('data: ', data);
        for (const key in data) {
            const dom=updateModelform.querySelector(`[name='${key}']`)//key属性名
            // console.log('dom: ', dom);//需要理解(`[name='${key}']`)这个写法
            //判断存在dom，且排除性别这个属性，性别需要另外设置
            if(dom&&dom.name!=='sex'){
                //如果存在有这个元素，那么值等于原来的值，key是变量，所以不能用点语法，要用中括号
                // console.log('data[key]: ', data[key]);
                dom.value=data[key]
            }else{
                console.log(dom)
            }
        }
        //设置性别
        updateModelform.querySelector(`[name='sex'][value='${data.sex}']`).checked=true
        //根据当前的省份设置城市的下拉列表
        // renderselect('/geo/city',{pname:data.province},'市',updateModelform.querySelector("[name='city']"),data.city)
        //利用属性值来获取元素的方法的写法是"[name='city']"
        renderselect('/geo/city',{pname:data.province},'市',updateModelform.querySelector("[name='city']"),data.city)
        //updateModelform.querySelector("[name='county']")，是为了展示下拉列表
        renderselect('/geo/county',{pname:data.province,cname:data.city},'县',updateModelform.querySelector("[name='county']"),data.county)
    })
}
})

updateModelform.addEventListener('submit',function(e){
e.preventDefault()
//获取表单的全部数据
const data=$(updateModelform).serialize()
console.log('data: ', data);
axios({
    url:'/student/update',
    method:'put',
    data,
})
.then((result)=>{
console.log(result)
if(result.data.code===0){
toastr.success(result.data.message)
$(updateModal).modal('hide')
render()
}else{
    toastr.warning(result.data.message)
}
})
})































//修改框的区域渲染
function initupdate(){
    //============================================================================
    // 获取新增 表单中  省下拉列表
 const updateProviceSelect = updateModelform.querySelector("[name='province']");
 // 获取新增 表单中  市下拉列表
 const updateCitySelect = updateModelform.querySelector("[name='city']");
 // 获取新增 表单中  区下拉列表
 const updateCountySelect = updateModelform.querySelector("[name='county']");
// console.log('updateCountySelect: ', updateCountySelect);
    const initProvinceSelect = () =>{
renderselect('/geo/province',{},'省',updateProviceSelect)
    }
    initProvinceSelect()
//====================================================================================
//获取市
//给省绑定change
    const initCitySelect=()=>{
        updateProviceSelect.addEventListener('change',function(){
            //切换省的时候，重置县的值（表单中-切换省的bug）
            updateCountySelect.innerHTML = `<option>-县--</option>`;
            //获取选中的值
            // console.log(updateProviceSelect.value)
            renderselect('/geo/city',{pname:updateProviceSelect.value},'市',updateCitySelect)
        })
    }
    initCitySelect()//市的调用
//=================================================================================
    const initCountySelect=()=>{
        updateCitySelect.addEventListener('change',function(){
            if(!updateCitySelect.value){
                updateCountySelect.innerHTML = `<option>-县--</option>`;
                return
            }
            //给市绑定change
            //获取选中的值
            // console.log(updateProviceSelect.value)
            // console.log(updateCitySelect.value)
            
            renderselect('/geo/county',{pname:updateProviceSelect.value,
                cname:updateCitySelect.value,},'区',updateCountySelect)   
        })
    }
    initCountySelect()//区的调用
}
initupdate()//初始化 新增 省市区调用

//=======================删除
tbody.addEventListener('click',function(e){
if(e.target.classList.contains('truedelete')&&confirm('是否删除数据')){
    console.log('你删除了')
    const id=e.target.dataset.id
    console.log('id: ', id);
    axios({
        url:'/student/delete',
        method:'delete',
        params:{id}
    })
    .then((result)=>{
console.log(result)
toastr.success('成功删除')
render()
    })
}
})
//解决点击模态框，中途关闭再点开，遗留数据是问题
addformbtn.addEventListener('click',function(){
    
    $(addModel).modal('show');
    addModelform.reset()
    document.querySelector('.add-form [name=city]').innerHTML=`<option>-市--</option>`;
    // document.querySelector('.update-form name=[city]').innerHTML=`<option>-市--</option>`;
    document.querySelector('.add-form [name=county]').innerHTML=`<option>-县--</option>`;
    // document.querySelector('.update-form name=[county]').innerHTML=`<option>-县--</option>`;
})